<template>
  <basic-container>
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="基本信息" name="info">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="队伍名称" align="center">
            {{ descriptions.name }}
          </el-descriptions-item>
          <el-descriptions-item label="队伍编号" align="center">
            {{ descriptions.code }}
          </el-descriptions-item>
          <el-descriptions-item label="密级" align="center">
            {{ securityLabel(descriptions.security) }}
          </el-descriptions-item>
          <el-descriptions-item label="简介" align="center">
            {{ descriptions.note }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="序列" name="list">
        <div class="pt10">
          <avue-crud
            :option="option"
            v-model:search="search"
            v-model:page="page"
            v-model="form"
            :table-loading="loading"
            :data="data"
            :before-open="beforeOpen"
            ref="crud"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
          >
            <template #security="scope">
              <div>{{ securityLabel(scope.row.security) }}</div>
            </template>
            <template #menu-left="scope">
              <el-button type="info" plain icon="sort" @click="openSort">排序</el-button>
            </template>
          </avue-crud>
        </div>
      </el-tab-pane>
    </el-tabs>
    <SortDialog ref="child" :data="data" @sort="sort" />
  </basic-container>
</template>

<script>
import { getDetail } from '@/api/position/team';
import { getDetail as getSqeunceDetail, add, update, remove } from '@/api/position/sequence';
import option from '../options/team';
import { getSequenceList } from '@/api/position/team';
import { sort } from '@/api/position/sequence';
import SortDialog from './sortDialog.vue';

export default {
  components: { SortDialog },
  props: {
    currentNode: Object,
    treeData: Array,
  },
  watch: {
    currentNode: {
      handler(e) {
        if (e.level == 1) {
          this.getDetail();
          this.onLoad();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.option.column[3].dicData = this.website.securityLists;
  },
  data() {
    return {
      form: {},
      query: {},
      search: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: option,
      data: [],
      activeName: 'list',
      descriptions: {},
    };
  },
  computed: {},
  methods: {
    async sort(data) {
      await sort(
        data.map(item => ({
          id: item.id,
          code: item.code,
          name: item.name,
          security: item.security,
          sort: item.sort,
          note: item.note,
          teamId: item.teamId,
        }))
      );
      this.$message.success('已重新排序');
      this.$emit('refresh')
      this.onLoad(this.page);
    },
    openSort() {
      this.$refs.child.open();
    },
    securityLabel(security) {
      let securityObj = this.website.securityLists.find(item => item.value == security);
      return securityObj ? securityObj.label : security;
    },
    getDetail() {
      getDetail(this.currentNode.data.id).then(res => {
        this.descriptions = res.data.data;
      });
    },
    updateTree() {
      this.treeData[0].label = '123123';
      this.treeData[0].children = [
        {
          id: '121212',
          label: 'asdsad',
          isLeaf: false,
        },
      ];
    },
    rowSave(row, done, loading) {
      row.teamId = this.currentNode.data.id;
      add(row).then(
        () => {
          this.onLoad();

          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$emit('refresh');
          done();
        },
        error => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      row.teamId = this.currentNode.data.id;
      update(row).then(
        () => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$emit('refresh');
          done();
        },
        error => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          remove(row.id);
          this.$emit('refresh');
        })
        .then(() => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getSqeunceDetail(this.form.id).then(res => {
          this.form = res.data.data;
          this.form.security = String(this.form.security);
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad();
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud && this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad();
    },
    refreshChange() {
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      if (!this.currentNode.data.id) {
        return;
      }

      getSequenceList(this.currentNode.data.id).then(res => {
        const data = res.data.data;
        this.page.total = Number(data.total);
        this.data = data;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style></style>
